<template xmlns:el-col="http://www.w3.org/1999/html">
  <div style="display: flex;margin: 0">
    <!--左侧区域-->
    <div :style="{width:(isCollapse ? '64px':'208px')}">
      <!--左侧菜单栏-->
      <!--height：控制的是当右边的区域超过我自己的规定区域以后铺满100%;min-height:控制的是当我右边区域没数据时或者小于左边高度时，至少铺满一个视图窗口-->
      <el-menu
          background-color="#3C82F5"
          style="width: 100%;height: 100%;min-height: 100vh"
          text-color="#fff"
          active-text-color="#ff0"
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened router
          @select="selectMenu"
      >
        <!--左侧菜单栏中的顶部条-->
        <el-row :gutter="10" style="padding-top: 10px;margin-bottom: 10px">
          <el-col :span="3"></el-col>
          <el-col :span="isCollapse ? 0:16">
            <router-link to="/" style="color: #fff;text-decoration: none;font-weight: bold;position: relative;top:8px;">
              智能空间管理系统
            </router-link>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px">
              <User/>
            </el-icon>
            <span>人员管理</span>
          </template>
          <el-menu-item index="/console/user">人员列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px">
              <Collection />
            </el-icon>
            <span>组织管理</span>
          </template>
          <el-menu-item index="/console/organization">组织列表</el-menu-item>
          <el-menu-item index="/console/audit">组织审核</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px">
              <Place/>
            </el-icon>
            <span>资源管理</span>
          </template>
          <el-menu-item index="/console/resource">资源列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px">
              <Place/>
            </el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/console/authority">权限管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px">
              <Place/>
            </el-icon>
            <span>小信箱</span>
          </template>
          <el-menu-item index="/console/message">信箱管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!--右侧区域-->
    <div :style="{width:(isCollapse ? 'calc(100% - 64px)':'calc(100% - 208px)')}">
      <!--右侧顶部条菜单栏-->
      <el-header style="background-color: #e9eff3;padding-top: 22px;height: 8vh;">
        <!--右侧顶部条 折叠图标+退出登录-->
        <el-row :gutter="10">
          <el-col :span="1" style="text-align: left">
            <el-icon style="font-size: 20px;position: relative;top:3px;" @click="changeCollapse">
              <Expand/>
            </el-icon>
          </el-col>
          <el-col :span="15" style="text-align: left">
            <!--面包屑导航-->
            <el-breadcrumb separator="/" style="position: relative;top:6px">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in breadCrumb">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <!--用户名与退出登录-->
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute;right: 20px;">
            <span style="font-size: 19px;font-weight: bold">
             {{user.username}}
              <el-icon><arrow-down/></el-icon>
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col :span="2">
            <el-button type="primary">
              <el-icon size="30">
                <SetUp />
              </el-icon>
              <router-link to="/home">
                <span>控制台</span>
              </router-link>
            </el-button>
          </el-col>
        </el-row>
      </el-header>
      <!--右侧下半部分 是可变的主体区域-->
      <el-main style="padding: 0;min-height: 90vh;overflow-y: auto">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const isCollapse = ref(false);
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
}

//获取用户登录信息
const user = ref(getUser());
//退出登录功能
const logout = () => {
  if (confirm('确定要退出吗?')) {
    localStorage.removeItem('user');
    localStorage.removeItem('breadCrumb');
    window.location.href = '/';
    user.value = '';
  }
}

//准备数组维护面包屑数据
let map = {
  '/console/user':['人员管理','人员列表'],
  '/console/organization':['组织管理','组织列表'],
  '/console/audit':['组织管理','组织审核'],
  '/console/resource':['资源管理','资源列表'],
  '/console/authority': ['权限管理','权限管理'],
  '/console/message': ['信箱','信箱管理'],
};

//定义变量维护当前面包屑的数据
const breadCrumb = ref(JSON.parse(localStorage.getItem('breadCrumb') || '["用户管理", "用户列表"]'));
//选择菜单项时触发
const selectMenu = (index) => {
  //通过index的获取map的值并给到面包屑
  breadCrumb.value = map[index];
  console.log(breadCrumb.value);
  //将值存入localStorage中，防止刷新页面数据丢失
  localStorage.setItem('breadCrumb',JSON.stringify(breadCrumb.value));
}
</script>



